import React from 'react';
import ReactECharts from 'echarts-for-react';

interface EchartsPieProps {
  data: any[];
  angleField: string;
  colorField: string;
  height?: number;
  radius?: number | [number, number];
  label?: {
    type?: string;
    content?: string;
  };
  interactions?: any[];
  [key: string]: any;
}

const EchartsPie: React.FC<EchartsPieProps> = ({
  data = [],
  angleField,
  colorField,
  height = 400,
  radius = 0.8,
  label,
  interactions,
  ...rest
}) => {
  // 确保 data 是数组
  const safeData = Array.isArray(data) ? data : [];

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '数据',
        type: 'pie',
        radius: Array.isArray(radius) ? radius : [0, `${radius * 100}%`],
        data: safeData.map(item => ({
          value: item[angleField],
          name: item[colorField],
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          show: label?.type === 'outer',
          formatter: label?.content === '{name}: {percentage}' 
            ? '{b}: {d}%' 
            : '{b}: {c}',
        },
      },
    ],
  };

  return (
    <ReactECharts
      option={option}
      style={{ height: `${height}px`, width: '100%' }}
      {...rest}
    />
  );
};

export default EchartsPie;
